<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法2 v-on 事件绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识1:v-on指令(鼠标单击事件)</h1>
            <p>我已经被你点了{{num}}次</p>
            <button v-on:click="num++">点我点我++</button>
            <button v-on:click="num--">点我点我--</button>
            <h3>许多事件处理逻辑会更加复杂，所以在复杂的逻辑下，直接把代码写在v-on指令是不合适的，
                因此，v-on可以接收一个需要调用的方法名称
            </h3>
            <button v-on:click="func1()">pint_information</button>
            <button @click="func2()">简写</button>

        <h1>知识点2：键盘事件keyup，keydown</h1>
            <input type="text" @keyup="show('我被释放了')">
            <input type="text" @keydown="show('我被按下了')">
        
        <h1>知识点3：其他事件(dblclick双击事件，contextmenu右击事件，mouseover鼠标移上，mouseout鼠标移开)</h1>
            <p>看看变化{{num}}</p>
            <button @dblclick="num++">双击事件</button>
            <button @contextmenu="show('右击事件')">右击事件</button>
            <button @mouseover="show('鼠标移上')">鼠标移上</button>
            <button @mouseout="show('鼠标离开')">鼠标离开</button>

        <h1>知识点4：事件修饰符</h1>
            <h3>1.once修饰符 表示该事件只能点击一次</h3>
                <button @click.once="num++">只能点一次</button>
            <h3>2.prevent修饰符 阻止元素的默认行为</h3>
                <form @submit="handleSubmit()">
                    <p>不使用修饰符</p>
                    <button type="submit">提交</button>
                </form>
                <form @submit.prevent="handleSubmit()">
                    <p>使用修饰符</p>
                    <button type="submit">提交</button>
                </form>
            <h3>3.stop修饰符 阻止层叠事件中的冒泡</h3>
                <div id="box1" @click.stop="box('box1')">box1
                    <div id="box2" @click.stop="box('box2')">box2
                        <div id="box3" @click.stop="box('box3')">box3
                        </div>
                    </div>
                </div>
            <h3>4.capture修饰符 事件的捕获</h3>
                <h4>在层叠事件中，我们默认从内到外，如果想要先处理外层的某个事件，可以用capture捕获
                    当内部元素触发时，先处理capture修饰的事件，然后再提交当前事件，捕获顺序由外到内
                </h4>
                <div id="box1" @click.capture="box('box1')">box1
                    <div id="box2" @click.capture="box('box2')">box2
                        <div id="box3" @click.stop="box('box3')">box3
                        </div>
                    </div>
                </div>
            <h3>5.self修饰符 只在绑定了事件的那个对象层中使用</h3>    
                <div id="box1" @click="box('box1')">box1
                    <div id="box2" @click.self="box('box2')">box2
                        <div id="box3" @click.self="box('box3')">box3
                        </div>
                    </div>
                </div>
            <h3>6.监听键盘按键修饰符</h3>
                <p>.enter .tab .delete .esc .space .up .down . left . right .ctrl .alt . shift .meta(window微标键)</p>
                <h4>alt+c 可以组合</h4>
                <input type="text" @keyup.alt.c="show('alt+c')">
                <button @click.ctrl.shift="show('ctrl+shift')">666</button>
                <h4>.exact 允许你控制精准的系统修饰符组合触发(只能按你写的键盘)</h4>
                <button @click.ctrl.shift.exact="show('ctrl+shift')">777</button>

    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data(){
            return{
                num:1
            }
        },
        methods: {
            func1(){
                console.log('(*´▽｀)ノノ');
            },
            func2(){
                console.log(Math.pow(2,10));
            },
            show(val){
                console.log(val);    
            },
            handleSubmit(){
                console.log("提交成功");
            },
            box(val){
                console.log(val);
            }
        },
        watch: {
            
        }
    }).mount('#app')
</script>

<style>
    #box1{
        width: 300px;
        height: 200px;
        background-color: burlywood;
    }
    #box2{
        width: 250px;
        height: 150px;
        background-color:darksalmon;
    }
    #box3{
        width: 200px;
        height: 100px;
        background-color: brown;
    }
</style>